<template>
  <div class="b-cont">
    <div>
      <sections class="b-cells" title="确认函" m-color="#46CDCF" content-height="auto">
        <flexbox :gutter="0" wrap="wrap" style="padding: 10px 8px 0">
          <flexbox-item
            :span="0.5"
            v-for="(item, index) in list"
            :key="index"
            class="b-cell"
          >
            <flexbox align="stretch" class="b-cell-b">
              <div class="b-cell-name">{{ item.name }}</div>
              <div class="b-cell-value">
                {{
                  typeof item.config == "object" ? item.config.toString() : item.config
                }}
              </div>
            </flexbox>
          </flexbox-item>
        </flexbox>
      </sections>
    </div>
  </div>
</template>

<script>
import loading from "../mixins/loading";
import Sections from "../components/Sections";
import { crmProductDetail } from "@/api/customermanagement/confirmation";

export default {
  /** 确认函*/
  name: "c-r-m-relative-confirm",
  components: {
    Sections,
  },
  mixins: [loading],
  filters: {
    addressShow(list) {
      return list ? list.join(" ") : "";
    },
  },
  props: {
    /** 模块ID */
    id: [String, Number],
    // 订单ID
    contractId: {
      type: [String, Number],
      default: null,
    },
    /** 没有值就是全部类型 有值就是当个类型 */
    crmType: {
      type: String,
      default: "",
    },
  },
  watch: {
    id(val) {
      // this.getConfirm();
    },
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {},
  mounted() {
    // this.getConfirm();
  },
  methods: {
    // 获取确认函信息
    getConfirm() {
      this.loading = true;
      crmProductDetail({
        contract_id: this.contractId,
        product_id: this.id,
      })
        .then((res) => {
          this.list = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.b-cont {
  position: relative;
  padding: 0 50px 20px 20px;
}

.b-cells {
  margin-top: 25px;
}

.b-cell {
  padding: 0 10px;
  .b-cell-b {
    width: auto;
    padding: 8px;
    .b-cell-name {
      width: 100px;
      margin-right: 10px;
      font-size: 13px;
      flex-shrink: 0;
      color: #777;
    }
    .b-cell-value {
      font-size: 13px;
      color: #333;
      word-wrap: break-word;
    }
    .b-cell-foot {
      flex-shrink: 0;
      display: block;
      width: 15px;
      height: 15px;
      margin-left: 8px;
    }
  }
}

.f-item {
  padding: 3px 0;
  height: 25px;
  .f-img {
    position: block;
    width: 15px;
    height: 15px;
    padding: 0 1px;
    margin-right: 8px;
  }
  .f-name {
    color: #666;
    font-size: 12px;
    margin-right: 10px;
  }
}
</style>
